<template>
  <Viewer :router="viewerRouter" @back="$emit('to-page', 2, prevPageName)"></Viewer>
</template>

<script setup>
import { defineAsyncComponent, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useDesktopViewerRouter } from '@/compositions/viewer/router/desktopViewerRouter'
import { useMobileViewerRouter } from '@/compositions/viewer/router/mobileViewerRouter'

const Viewer = defineAsyncComponent(() => import('@/components/viewer/Viewer.vue'))

const props = defineProps({
  id: { type: Number, required: true },
  username: { type: String, required: true },
  prevPageName: { type: String },
})

const { isDesktop } = storeToRefs(useAppStore())
const viewerRouter = isDesktop.value
  ? useDesktopViewerRouter('desktop-mine-creator')
  : useMobileViewerRouter('mobile-mine-creator')
const { setFromCreator } = viewerRouter

watch(
  () => props.id,
  (v) => setFromCreator(v),
  { immediate: true },
)
</script>
